<template>
  <div class="aside">
    <div class="collapse" @click="onCollapseChange">
      <hr />
      <hr />
      <hr />
    </div>
    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <template v-for="item in treeMenus">
        <el-submenu v-if="item.children" :index='item.id.toString()' :key="item.id">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{item.name}}</span>
          </template>
          <template v-for="k in item.children">
            <el-submenu v-if="k.children" :index='k.id.toString()' :key="k.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{k.name}}</span>
              </template>
              <template v-for="i in k.children">
                <el-submenu v-if="i.children" :index='i.id.toString()' :key="i.id">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">{{i.name}}</span>
                  </template>
                </el-submenu>
                <el-menu-item @click="handleClick(i)" :index="i.id.toString()" v-if="!i.children" :key="i.id">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{i.name}}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item @click="handleClick(k)" :index="k.id.toString()" v-if="!k.children" :key="k.id">
              <i class="el-icon-menu"></i>
              <span slot="title">{{k.name}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item @click="handleClick(item)" :index="item.id.toString()" v-if="!item.children" :key="item.id">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { menus, arrayToTree } from '../../utils'
export default {
  name: 'Aside',
  data() {
    return {
      isCollapse: true,
      defaultActive: '',
      treeMenus: []
    }
  },
  created() {
    this.treeMenus = arrayToTree(menus.filter(_ => _.mpid !== -1), 'id', 'mpid')
  },
  methods: {
    handleClick(e) {
      this.$router.push({ path: e.router })
      this.defaultActive = e.id.toString()
    },
    onCollapseChange() {
      this.isCollapse = !this.isCollapse
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style>
.aside > .collapse {
  padding: 0px 10px;
  border-right: 1px red solid;
  cursor: pointer;
  box-sizing: border-box;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
